import React, { useEffect, useState } from "react";
import { Table, Pagination } from 'antd';
import axios from "axios";
const columns = [
    { title: '注册日期', dataIndex: 'registe_time', key: 'name', },
    { title: '用户姓名', dataIndex: 'username', key: 'age' },
    { title: '注册地址', dataIndex: 'city', key: 'address' }
];

export default function Userlist() {
    let [data, setData] = useState([])
    let [total, setTotal] = useState(null)
    let [pageSize, setPage] = useState(20)

    function pagChange(page) {
        userAxios(page, 20)
    }
    function changeSize(current, size) {
        setPage(size)
    }

    function userAxios(page, limit) {
        axios.get('https://elm.cangdu.org/v1/users/list?offset=' + (page - 1) * 20 + '&limit=' + limit).then(res => {
            data = res.data
            setData(data)
            console.log(data);
        })
    }
    useEffect(() => {
        userAxios(1, 20)
        axios.get('https://elm.cangdu.org/v1/users/count').then(res => {
            total = res.data.count
            setTotal(total)
        })
    })

    return (<div>
        <Table key={1} columns={columns} dataSource={data} rowKey={"username"} pagination={false} /> ;
        <Pagination
            total={total}
            pageSize={pageSize}
            showSizeChanger
            showQuickJumper
            showTotal={(total) => `共${total} 条`}
            onChange={pagChange}
            onShowSizeChange={changeSize}
        />
    </div>
    )


}
